<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>大数据可视化</title>
		<link rel="stylesheet" href="./assets/css/reset.css" />
	</head>

	<body>
		<!-- <div class="test"></div> -->

		<!-- 头 -->
		<header>
			<h1>千锋美团大数据平台</h1>
			<span>2022年3月14日18时40分1秒</span>
		</header>
		<!-- 头 -->

		<!-- 内容 -->
		<section class="main">
			<div class="column">
				<div class="box box-l1" style="height: 4rem"></div>
				<div class="box box-l2" style="height: 2.6rem">
					<div class="alltitle">标题样式</div>
					<div class="wraptit"><span>单号</span><span>金额</span><span>品名</span><span>时间</span></div>
					<div class="wrap str_wrap str_vertical">
						<div class="str_move str_origin" style="top: -4.0994rem">
							<ul>
								<li>
									<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
								</li>
								<li>
									<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
								</li>
								<li>
									<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
								</li>
								<li>
									<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
								</li>
								<li>
									<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
								</li>
								<li>
									<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
								</li>
								<li>
									<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
								</li>
								<li>
									<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
								</li>
								<li>
									<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
								</li>
							</ul>
							<div class="str_move str_move_clone" style="top: 100%; bottom: auto; height: 360px">
								<ul>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
								</ul>
							</div>
							<div class="str_move str_move_clone" style="bottom: 100%; top: auto; height: 360px">
								<ul>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
									<li>
										<p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="box box-l3" style="height: 4.6rem"></div>
			</div>
			<div class="column">
				<div class="box box-m1">
					<div class="leftWord">
						<span>总体情况(单位:万元)</span>
						<div class="number1">11215132</div>
					</div>
					<div class="rightImgs">
						<div class="Imgs">
							<span>标题样式</span>
							<div class="round round_1"></div>
						</div>
						<div class="Imgs">
							<span>标题样式</span>
							<div class="round round_2"></div>
						</div>
						<div class="Imgs">
							<span>标题样式</span>
							<div class="round round_3"></div>
						</div>
					</div>
				</div>
				<div class="box box-m2" style="height: 3.5rem"></div>
				<div class="box box-m3" style="height: 4.4rem"></div>
			</div>
			<div class="column">
				<div class="box box-r1" style="height: 3rem">
					<div class="alltitle">标题样式</div>
					<table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
						<tbody>
							<tr>
								<th scope="col">排名</th>
								<th scope="col">公司</th>
								<th scope="col">数量</th>
								<th scope="col">增长率</th>
							</tr>
							<tr>
								<td><span>1</span></td>
								<td>腾讯科技</td>
								<td>114110万<br /></td>
								<td>80%<br /></td>
							</tr>
							<tr>
								<td><span>2</span></td>
								<td>百度公司</td>
								<td>923823万</td>
								<td>42%</td>
							</tr>
							<tr>
								<td><span>3</span></td>
								<td>新浪</td>
								<td>1240253万</td>
								<td>36%</td>
							</tr>
							<tr>
								<td><span>4</span></td>
								<td>网易</td>
								<td>0.5亿</td>
								<td>11%</td>
							</tr>
							<tr>
								<td><span>5</span></td>
								<td>雅虎</td>
								<td>13423万</td>
								<td>8%</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="box box-r2" style="height: 3rem">
					<div class="alltitle">标题样式</div>
					<table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
						<tbody>
							<tr>
								<th scope="col">排名</th>
								<th scope="col">公司</th>
								<th scope="col">数量</th>
								<th scope="col">增长率</th>
							</tr>
							<tr>
								<td><span>1</span></td>
								<td>腾讯科技</td>
								<td>114110万<br /></td>
								<td>80%<br /></td>
							</tr>
							<tr>
								<td><span>2</span></td>
								<td>百度公司</td>
								<td>923823万</td>
								<td>42%</td>
							</tr>
							<tr>
								<td><span>3</span></td>
								<td>新浪</td>
								<td>1240253万</td>
								<td>36%</td>
							</tr>
							<tr>
								<td><span>4</span></td>
								<td>网易</td>
								<td>0.5亿</td>
								<td>11%</td>
							</tr>
							<tr>
								<td><span>5</span></td>
								<td>雅虎</td>
								<td>13423万</td>
								<td>8%</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="box box-r3" style="height: 4.6rem">
					<div class="box r3-1"></div>
					<div class="box r3-2"></div>
					<div class="box r3-3"></div>
				</div>
			</div>
		</section>
		<!-- 内容 -->

		<script src="./assets/js/flexible.js"></script>
		<script src="http://unpkg.com/jquery"></script>
		<script src="https://unpkg.com/webopenfather-date@1.0.1/dist/wofDate.js"></script>
		<script src="http://unpkg.com/echarts"></script>
		<script src="./assets/js/left1.js"></script>
		<script src="./assets/js/left2.js"></script>
		<script src="./assets/js/left3.js"></script>
		<script src="./assets/js/m1.js"></script>
		<script src="./assets/js/m2.js"></script>
		<script src="./assets/js/m3.js"></script>
		<script src="./assets/js/m4.js"></script>
		<script>
			// console.log(wofDate.format('Y-m-d H:i:s'))
			// console.log(wofDate.format('Y/m/d'))
			// console.log(wofDate.format('Y/m/d H:i:s'))
			setInterval(() => {
				$('header span').html(wofDate.format('Y年m月d日H时i分s秒'))
			}, 1000)
		</script>
	</body>
</html>
